<template>
  <a-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    :destroyOnClose="true"
    @ok="handleOk"
    @cancel="handleCancel">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <!-- 主表单区域 -->
        <a-row class="form-row"  :gutter="1">
          <a-col :lg="12">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              :label=" $t('light.longitude') ">
              <a-input  size="small" v-decorator="['longitude', {}]" />
            </a-form-item>
          </a-col>
          <a-col :lg="12">
            <a-form-item
              :label-col="{ span: 7 }" :wrapper-col="{ span: 15 }"
              :label=" $t('light.latitude') ">
              <a-input  size="small" v-decorator="['latitude', {}]" />
            </a-form-item>
          </a-col>

        </a-row>
        <baidu-map
          ak="lhedb05t3bGeKtrCfYbpweXr"
          class="bm-view"
          :scroll-wheel-zoom="true"
          :center="center"
          :zoom="zoom"
          @ready="map_handler"
        >
          <bm-control>
            <bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 10}">
              <input type="text" v-model="keyword" :placeholder=" $t('base.pleaseEnter') " class="serachinput">
            </bm-auto-complete>
          </bm-control>
          <bm-local-search  style="display: none" :auto-viewport="true" :keyword="keyword"></bm-local-search>
        </baidu-map>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>

  import {httpAction} from '@/api/manage'
  import pick from 'lodash.pick'
  import {validateDuplicateValue} from '@/utils/util'
  import {BaiduMap, BmControl, BmView, BmAutoComplete, BmLocalSearch, BmMarker,BmLabel} from 'vue-baidu-map'
  import {GLR_ADDRESS_INFO} from "@/store/mutation-types"

  export default {
    name: "GlrLightLG",
    components: {
      BaiduMap,
      BmControl,
      BmView,
      BmAutoComplete,
      BmLocalSearch,
      BmMarker,
      BmLabel
    },
    data() {
      return {
        form: this.$form.createForm(this),
        title: this.$t('light.updateCoordinate'),
        width: 800,
        BMap: {},
        map: {},
        visible: false,
        center: {},
        zoom: 18,
        type:'',
        keyword: '',
        model: {},
        labelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
        confirmLoading: false,
        disableMixinCreated:true,
        validatorRules: {
          phoneNumber: {
            rules: []
          },
          phoneType: {
            rules: []
          },
          gatewayModel: {
            rules: [
              {required: true, message: '请输入网关型号!'},
            ]
          },
          gatewayType: {
            rules: [
              {required: true, message: '请输入网关类型!'},
            ]
          },
          longitude: {
            rules: []
          },
          latitude: {
            rules: []
          },
          gatewayName: {
            rules: [
              {required: true, message: '请输入网关名称!'},
            ]
          },
          gatewayCode: {
            rules: [
              {required: true, message: '请输入网关编号!'},
            ]
          },

        },
        url: {
          glrGatewayUpdateLg: "/glr/glrGateway/updateLg",
          glrLightUpdateLg: "/glr/glrLight/updateLg",
          glrLightPoleUpdateLg: "/glr/glrLightPole/updateLg",
        }
      }
    },
    created() {
    },
    methods: {
      map_handler({BMap, map}) {
        this.BMap = BMap;
        this.map = map;
        const point = new this.BMap.Point(this.model.longitude, this.model.latitude);
        const marker = new this.BMap.Marker(point) // 设置点击位置
        map.addControl(new BMap.MapTypeControl({
          mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
          ]}));
        map.setMapType(BMAP_HYBRID_MAP);
        map.clearOverlays(); // 清空地图上其他红色位置标识
        map.addOverlay(marker);  //
        this.map.addEventListener('click', (e) => {
          const point = new this.BMap.Point(e.point.lng, e.point.lat)
          this.model.latitude=e.point.lat;
          this.model.longitude=e.point.lng;
          const marker = new this.BMap.Marker(point) // 设置点击位置
          map.clearOverlays(); // 清空地图上其他红色位置标识
          map.addOverlay(marker);  // 添加指定点
          this.$nextTick(() => {
            this.form.setFieldsValue(pick(this.model,'longitude','latitude'))
          })
        });
      },
      add() {
        this.edit({});
      },
      edit(record,type) {
        this.keyword="";
        this.form.resetFields();
        this.type=type;
        this.model = Object.assign({}, record);

        if (this.model.longitude==null){
          this.model.longitude=GLR_ADDRESS_INFO.longitude;
          this.model.latitude=GLR_ADDRESS_INFO.latitude;
          this.$message.warning(this.$t('light.noAddressMessage'));
        }
        this.center={lng: this.model.longitude, lat: this.model.latitude};
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'longitude','latitude'))
        })
      }
      ,
      close() {
        this.$emit('close');
        this.visible = false;
      },
      handleOk() {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let httpurl = '';
            if(that.type=='1'){
              httpurl += that.url.glrGatewayUpdateLg;
            }else if(that.type=='2'){
              httpurl += that.url.glrLightUpdateLg;
            }else if(that.type=='3'){
              httpurl += that.url.glrLightPoleUpdateLg;
            }
            let method = 'post';
            let formData = Object.assign(this.model, values);
            console.log("表单提交数据", formData)
            httpAction(httpurl, formData, method).then((res) => {
              if (res.success) {
                //that.$message.success(res.message);
                that.$message.success(that.$t('base.operationSuccessful'));
                that.$emit('ok');
              } else {
                //that.$message.warning(res.message);
                      that.$message.warning(that.$t('base.operationFailed'));
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })
          }

        })
      }
      ,
      handleCancel() {
        this.close()
      }
      ,
      popupCallback(row) {
        this.form.setFieldsValue(pick(row, 'currentWorkStatus', 'phoneNumber', 'phoneType', 'gatewayModel', 'gatewayType', 'longitude', 'latitude', 'gatewayName', 'gatewayCode', 'sysCompanyCode', 'controlNumber', 'controlModel', 'currentPeriod', 'dimmingValue', 'switchingState', 'temperature', 'humidity', 'voltageA', 'voltageB', 'voltageC', 'currentA', 'currentB', 'currentC', 'illuminance', 'outage', 'signalValue', 'cellVoltage'))
      }
      ,
    }
  }
</script>
<style>
  .bm-view {
    width: 100%;
    height: 500px;
  }
  .serachinput {
    width: 300px;
    box-sizing: border-box;
    padding: 9px;
    border: 1px solid #dddee1;
    line-height: 20px;
    font-size: 16px;
    height: 38px;
    color: #333;
    position: relative;
    border-radius: 4px;
    -webkit-box-shadow: #666 0px 0px 10px;
    -moz-box-shadow: #666 0px 0px 10px;
    box-shadow: #666 0px 0px 10px;
  }
</style>